<!doctype html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
  <style type="text/css">
      div { padding: 15px;width: 200px;}
      p { margin:50px;}
  </style>
	<script type="text/javascript" src="../../jquery-2.1.1.js"></script>
	<title>position</title>
</head>
<body>

<div style="position:static;left:50px;top:50px;border:20px solid #ccc">
  <p id="aaron" style="position:static;left:30px;top:110px;border:25px solid red">Hello</p>
</div>
<ul>
</ul>

<script type="text/javascript">

var p = $("#aaron");
var position = p.position();
var offset = p.offset();

$('ul').append('<li>p元素position坐标: left:'+ position.left +' top:'+ position.top +';</li>\n<li>p元素offset坐标: left:'+ offset.left +' top:'+ offset.top +';</li>')

</script>

</body>
</html>

